<template>
  <div class="mt-4">
    <h3>{{ detail.title }}</h3>
    <div class="d-flex flex-column justify-space-between align-center mt-8">
      <v-img
        lazy-src="https://picsum.photos/id/11/10/6"
        max-height="200"
        max-width="300"
        :src="detail.image"
        class="ml-20"
      ></v-img>
    </div>
    <div class="d-flex flex-column justify-space-between align-center my-4" >
      <v-btn
      v-if="detail.videoUrl!=video"
      color="info"
  elevation="2"
   @click="jumpVideo"
>查看该视频<v-icon
        right
        dark
      >
        mdi-video
      </v-icon></v-btn>
      
    </div>
    
    <p class="mx-4" v-for="(item, i) in detail.content.split('#')" :key="i">
      {{ item }}
    </p>
    <!-- <video v-if="detail.videoUrl==video" width="80%" controls :src="detail.videoUrl"></video> -->
  </div>
</template>

<script>
export default {
  data: () => ({
    video:"https://school.bigjiang.cn/bestParents.mp4",
    detail: { title: "", image: "", content: "#" },
  }),

  created() {
    this.getData({md5:this.$route.query.md5,robot:this.$route.query.robot,method:"getArticleDetail"});
  },

  methods: {
    async getData(requireData) {
      let task = await this.getArticleDetail(requireData);
      // console.log(task);
      if (task.code) {
        this.detail = task.res.data;
        this.$Global.phone = task.res.data.phone;
      }
    },
    getArticleDetail(requireData) {
      return this.$axios
        .post(this.$Global.api, requireData)
        .then((res) => {
          return { code: 1, res: res };
        })
        .catch((error) => {
          // 请求失败处理
          return { code: 0, res: error };
        });
    },
    jumpVideo(){
        window.open(this.detail.videoUrl,'_blank')
      }
  },
};
</script>

<style type="text/css">
p {
  text-indent: 2em;
  text-align: left;
}
</style>
